import React from 'react';
import { Calendar } from 'react-date-range';
import { PopupWindow, Selector } from '../dumb';
import moment from 'moment';
import DateRangeStyle from './DateRange.less';

export default class DateRange extends React.Component {
    static propTypes = {
        name: React.PropTypes.string,
        dateRange: React.PropTypes.array,
        onDateChange: React.PropTypes.func

    }

    state = {
        toggle: false
    }

    constructor(props) {
        super(props);
    }

    handleToggle = () => {
        let {
            toggle
        } = this.state;
        this.setState({
            toggle: !toggle
        });
    }
 
  //设置时间
    handleSelect =(date)=> {
        let {format} = date;
        let { toggle } = this.state;
        let timeStr = date.format();  
        let time = timeStr.substring(0,timeStr.indexOf('T'));
        let { onDateChange } = this.props;

        onDateChange && onDateChange(time)

        this.setState({
            toggle: false
        });
    }

    render() {

        let { toggle } = this.state;
        let { primaryText,date } = this.props;

        return (
            <div className={DateRangeStyle.dateRange}>
                <Selector onClick={this.handleToggle} >{primaryText}</Selector>
                <PopupWindow visible={toggle} requestClose={()=> this.setState({ toggle: false})}>
                    <Calendar 
                    date={date}
                    onChange={this.handleSelect}
                    />
                </PopupWindow>
            </div>
        )
    }
};

